<!-- 执行器选择 -->
<template>
  <t-dialog header="请选择监听器" v-model:visible="dialogVisible" width="1024px">
    <t-card>
      <!-- 表格区域 -->
      <t-table
        :loading="loading"
        :data="list"
        :columns="columns"
        row-key="id"
        hover
        stripe
        bordered
        size="small"
        :pagination="pagination"
        @page-change="handlePageChange"
      >
        <template #type="{ row }">
          <t-tag theme="primary" variant="light-outline">
            {{ dictionaryStore.analysis('bpm_process_listener_type', row.type) }}
          </t-tag>
        </template>
        
        <template #valueType="{ row }">
          <t-tag theme="success" variant="light-outline">
            {{ dictionaryStore.analysis('bpm_process_listener_value_type', row.valueType) }}
          </t-tag>
        </template>
        
        <template #operation="{ row }">
          <t-button
            theme="primary"
            variant="text"
            @click="select(row)"
          >
            选择
          </t-button>
        </template>
      </t-table>
    </t-card>
  </t-dialog>
</template>
<script setup lang="ts">
import { processListenerCRUD, ProcessListenerVO } from '@/api/bpm/processListener'
import { computed, reactive, ref } from 'vue'
import { useDictionaryStore } from '@/store';

// 字典仓库
const dictionaryStore = useDictionaryStore();

/** BPM 流程 表单 */
defineOptions({ name: 'ProcessListenerDialog' })

const dialogVisible = ref(false) // 弹窗的是否展示
const loading = ref(true) // 列表的加载中
const list = ref<ProcessListenerVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = ref({
  pageNo: 1,
  pageSize: 10,
  type: '',
  event: '',
  status: 0
});

/** 打开弹窗 */
const open = async (type: string) => {
  queryParams.value = {
    pageNo: 1,
    pageSize: 10,
    type,
    event: '',
    status: 0
  };
  await getList();
  dialogVisible.value = true;
};
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 查询列表 */
const getList = async () => {
  try {
    loading.value = true;
    const data = await processListenerCRUD.page(queryParams.value);
    list.value = data.list;
    total.value = data.total;
  } finally {
    loading.value = false;
  }
};
const pagination = computed(() => ({
  current: queryParams.value.pageNo,
  pageSize: queryParams.value.pageSize,
  total: total.value,
  showPageSize: true,
  pageSizeOptions: [10, 20, 50, 100]
}));
/** 分页变化 */
const handlePageChange = (pageInfo: any) => {
  queryParams.value.pageNo = pageInfo.current;
  queryParams.value.pageSize = pageInfo.pageSize;
  getList();
};
const columns = [
  { colKey: 'name', title: '名称', width: 150, ellipsis: true },
  { colKey: 'type', title: '类型', width: 120 },
  { colKey: 'event', title: '事件', width: 100 },
  { colKey: 'valueType', title: '值类型', width: 120 },
  { colKey: 'value', title: '值', width: 200, ellipsis: true },
  { colKey: 'operation', title: '操作', width: 80, fixed: 'right' }
].map(column => ({ ...column, align: 'center' }));

/** 提交表单 */
const emit = defineEmits(['success','select']) // 定义 success 事件，用于操作成功后的回调
const select = async (row:any) => {
  dialogVisible.value = false
  // 发送操作成功的事件
  emit('select', row)
}
</script>
